<template>
  <div>
    <!-- ref将元素通过ref的值作为属性保存起来 -->
    <!-- 在传递对象的时候可以直接使用v-bind直接传递，类似react的展开 -->
    <MyHeader ref="HeaderComp" v-bind="person" />
    <hr />
    <!-- vue里的props通信需要通过v-bind传递 -->
    <Count :num="2" />
    <hr />
    <!-- 因为组件每次实例,都是不同的个体,所以数据不会共享 -->
    <Count :num="3" />
    <hr />
    <button @click="getRef">通过ref获取元素</button>
  </div>
</template>


<script>
//引入组件,组件默认需要两个单词的名字,这里是因为关掉了eslint的检测,所以不会报错
import Count from "./components/Count";
import MyHeader from "./components/MyHeader";

export default {
  //组件实例的根组件
  name: "App",
  data() {
    return {
      num: 0,
      person: {
        name: "金锋",
        age: 18,
        sex: "男",
      },
    };
  },
  //注册组件,实际是通过组件构造函数new了一个组件实例
  components: {
    Count,
    MyHeader,
  },
  //methods是vm上用来存放方法的配置项
  methods: {
    getRef() {
      //组件上的ref,获取的是组件实例本身
      console.log(this.$refs);
      //可以通过组件实例使用内部的方法
      this.$refs.HeaderComp.getRef();
    },
  },
};
</script>
<style>
</style>